@import "../common/global";

@mixin btnType($paramColor) {
  cursor: pointer;
  color: $paramColor;
  border: 1px solid $paramColor;
  background-color: transparent;
  &:hover {
    background-color: $paramColor;
    color: #ffffff;
  }
  @include disable($paramColor);
}



@mixin disable($paramColor) {

  &.disable {
    &,
    &:hover,
    &:focus {
      cursor: not-allowed;
      background-color: transparent;
      border-color: mix(#ffffff,$paramColor,60%);
      color: mix(#ffffff,$paramColor,60%);
    }
  }
}

.bbq-button {
  text-align: center;
  display: inline-block;
  border-radius: 2px;
  padding: 4px 8px;
  line-height: normal;
  transition: background-color .3s;
  box-sizing: border-box;
  background-color: #ffffff;
  &.normal {
    @include btnType($normalThemeColor);
  }
  &.danger {
    @include btnType($dangerThemeColor);
  }
  &.success {
    @include btnType($successThemeColor);
  }
  &.warning {
    @include btnType($warningThemeColor);
  }
  &.round {
    border-radius: 12px;
  }
}